<meta charset="UTF-8" />
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<link rel="stylesheet" href="/layui/css/layui.css" />

</head>
<style type="text/css">
.myData .layui-form-item {
	margin: 20px 100px 10px 45px;
}

.myData .layui-form-label {
	width: 85px;
}

.layui-input-block {
	margin-left: 120px;
}
</style>
<div class="layui-form">
	<form class="layui-form" name="updateRoleform" method="post" action="">
		<input name="uid" id="uid" hidden="true" th:value="${uid}" /> <input
			name="rid" id="rid" hidden="true" />

		<div class="layui-form-item">
			<div class="layui-form-item">
				<label class="layui-form-label">操作用戶</label>
				<div class="layui-input-inline">
					<input type="text" id="userName" readonly="readonly"  class="layui-input" />
				</div>
			</div>
			<div id="per_tree" class="demo-tree-more" align="center" lay-filter="per"></div>

			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div class="layui-input-block">
  <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">立即提交</button>

				</div>
			</div>
		</div>
	</form>
</div>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>

<script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
<script th:inline="javascript">
var menuList=[[${menuList}]];
var rid=[[${rid}]];

arr = [];
layui.use(['tree', 'util'], function() {
    var tree = layui.tree;
    var util = layui.util;
    var form = layui.form;
    
    tree.render({
        elem: '#per_tree',
        data: getData(),
        id: 'treeId',
        showCheckbox: true,     //是否显示复选框
        onlyIconControl: true
       
         
    });
    
          tree.setChecked('treeId', menuList);
  
function getData(){
    var data = [];
    $.ajax({
        url: "/menu/layuiTree?rid="+rid,    //后台数据请求地址
        type: "post",
        async:false,
        success: function(resut){
            data = resut;
            
            form.render(); //重新渲染
        }
    });
    return data;
}
          
        //按钮事件
  util.event('lay-demo', {
    getChecked: function(othis){
        var checkData = tree.getChecked('treeId');
					    for(i in checkData){
					        arr.push(checkData[i].id);
					    
					    if(checkData[i].children.length>0){
					     for(j in checkData[i].children){
					     arr.push(checkData[i].children[j].id);
					     
					     }
					       
					      }
					    }
                $.ajax({
                    type:"post",
                    url:"/role/updatePer",
                    traditional:true,
                    data: {
					arr :arr ,rid : rid
				},//表单数据
                    success:function(d){
                        if(d=="success"){
                              /* layer.msg("更新成功！"); */
				    		 //当你在iframe页面关闭自身时
	 	         		    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	              			  //layer信息提示
	              		 layer.msg('保存成功');//下面是关键代码
		 	           	 setTimeout(function () { parent.layer.close(index) }, 330);//延迟
		 	              
                        }
                        if(d=="error"){
                            layer.msg('保存异常!');
                        }
                        
						setTimeout(function (){
						 
							 window.parent.location.reload();
						}, 500);
                    }
                })
    }
    ,setChecked: function(){
      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
    }
    ,reload: function(){
      //重载实例
      tree.reload('demoId1', {
        
      });
      
    }
  });  
   
          
           
});
  function updatePer(){    
					 
    }
    

  //模拟数
 /* 
  //基本演示
  tree.render({
    elem: '#test12'
    ,data:'/menu/layuiTree'
    ,showCheckbox: true  //是否显示复选框
    ,isJump: true //是否允许点击节点时弹出新窗口跳转
    ,click: function(obj){
      var data = obj.data;  //获取当前点击的节点数据
      layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data)+ '</br>');
    }
  });
  
  //按钮事件
  util.event('lay-demo', {
    getChecked: function(othis){
      var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
      
      layer.alert(JSON.stringify(checkedData), {shade:0});
      console.log(checkedData);
    }
    ,setChecked: function(){
      tree.setChecked('demoId1', [12, 16]); //勾选指定节点
    }
    ,reload: function(){
      //重载实例
      tree.reload('demoId1', {
        
      });
      
    }
  });
 
 */
  
</script>
</html>